<template>
	<view>
		<view class="header">
			<view class="">
				<text class="american-knife">￥</text>
				<text class="price">4369</text>
			</view>
		</view>
		<view class="main">
			<u-radio-group v-model="radiovalue1" placement="column">
				<view class="pay">
					<view class="pay-display">
						<view class="pay-left">
							<image src="/static/logo.png" class="pay-image" mode=""></image>
							<view class="">
								<view class="">微信支付</view>
								<view class="payment-content">微信快捷支付</view>
							</view>
						</view>
						<view class="radio-box">
							<u-radio :customStyle="{marginBottom: '8px'}" activeColor="red" label=" " name="1">
							</u-radio>
						</view>
					</view>
					<u-line type="info"></u-line>
				</view>
				<view class="pay">
					<view class="pay-display">
						<view class="pay-left">
							<image src="/static/logo.png" class="pay-image" mode=""></image>
							<view class="">
								<view class="">微信支付</view>
								<view class="payment-content">微信快捷支付</view>
							</view>
						</view>
						<view class="radio-box">
							<u-radio :customStyle="{marginBottom: '8px'}" activeColor="red" label=" " name="2">
							</u-radio>
						</view>
					</view>
				</view>
			</u-radio-group>
		</view>
		<view class="footer">
			<button class="footer-button">立即支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 基本案列数据
				radiolist1: [{
						name: '',
						disabled: false
					},
					{
						name: '',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: '1',
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 350rpx;
		background-color: #FE323A;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.american-knife {
		font-size: 50rpx;
	}

	.price {
		font-size: 60rpx;
	}

	.main {
		background-color: #F6F6F6;
		height: 1080rpx;
		padding: 0rpx 20rpx 0rpx 20rpx;
		padding-right: 20rpx;
	}

	.pay {
		padding: 20rpx;
		background-color: #fff;
		position: relative;
		bottom: 40rpx;
		border-radius: 15rpx;
	}

	.pay-display {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.pay-left {
		display: flex;
		align-items: center;
	}

	.pay-image {
		width: 75rpx;
		height: 75rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.payment-content {
		color: #999999;
	}

	.radio-box {
		margin-bottom: 20rpx;
	}
	.footer{
		width: 95%;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		padding: 20rpx;
	}
	.footer-button{
		border-radius: 40rpx;
		background-color: #FE353A;
		color: #fff;
	}
</style>